<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="menus">
    <div :class="['menus-item', item.active ? 'active' : '']" v-for="(item, index) in menus" :key="index" @click="chooseMenu(item.deIndex)">
      {{ item.name }}
    </div>
  </div>
  <!-- 合同记录 -->
  <a-tabs v-model:active-key="contractTabKey" v-if="pageIndex == 4">
    <a-tab-pane :title="`普通版电子合同 (${contractCount.freeCount || 0})`" key="81">
      <ContractRecordFree
        permission-prefix="svms:business:workOrder"
        :orderId="orderId"
        :orderType="orderType"
        :payType="0"
        :contractAttribute="3"
      />
    </a-tab-pane>
    <a-tab-pane :title="`付费版电子合同 (${contractCount.payCount || 0})`" key="82">
      <ContractRecordPay
        permission-prefix="svms:business:workOrder"
        :orderId="orderId"
        :orderType="orderType"
        :payType="1"
        :contractAttribute="1"
      />
    </a-tab-pane>
    <a-tab-pane v-if="orderType == 2" :title="`线下合同 (${contractCount.offlineCount || 0})`" key="83">
      <ContractRecordOffline permission-prefix="svms:business:workOrder" :orderId="orderId" :orderType="orderType" :contractAttribute="2" />
    </a-tab-pane>
  </a-tabs>
  <orderDetailsPage v-if="pageIndex == 0" :orderType="orderType" :orderId="orderId" />
  <shortOrderCost v-if="pageIndex == 1 && orderType == 1" :orderId="orderId" />
  <longOrderCost v-if="pageIndex == 1 && orderType == 2" :orderId="orderId" />
  <shortChangeCarRecoredPage v-if="pageIndex == 2 && orderType == 1" :orderId="orderId" />
  <longChangeCarRecoredPage v-if="pageIndex == 2 && orderType == 2" :orderId="orderId" />
  <shortOperateRecord v-if="pageIndex == 3 && orderType == 1" :orderId="orderId" />
  <longOperateRecord v-if="pageIndex == 3 && orderType == 2" :orderId="orderId" />
</template>

<script setup name="associationorderdetails" lang="ts">
  import orderDetailsPage from './orderDetails.vue'
  import longOrderCost from './longOrderCost.vue'
  import shortOrderCost from './shortOrderCost.vue'
  import shortChangeCarRecoredPage from './shortChangeCarRecored.vue'
  import longChangeCarRecoredPage from './longChangeCarRecored.vue'
  import shortOperateRecord from '@/views/order/short-order/detail/components/operate-record.vue'
  import longOperateRecord from '@/views/order/long-order/detail/components/operate-record.vue'
  import { usePermission } from '@/hooks/usePermission'
  import ContractRecordFree from '@/views/order/short-order/detail/components/contract-record-free.vue'
  import ContractRecordPay from '@/views/order/short-order/detail/components/contract-record-pay.vue'
  import ContractRecordOffline from '@/views/order/short-order/detail/components/contract-record-offline.vue'

  import { onMounted, ref, watch, provide } from 'vue'
  import { useRoute } from 'vue-router'
  import { getContractRecordCount } from '@/api/order/sOrder'
  import { getLongContractRecordCount } from '@/api/order/czsOrder'

  const contractTabKey = ref('81')
  const route = useRoute()
  const routeQuery = route.query

  const pageIndex = ref(0)
  const props = defineProps({
    orderId: Number,
    workId: Number,
    orderType: Number,
    workCode: String,
    status: Number,
  })
  const menus = ref([
    { name: '订单详情', deIndex: 0, active: true },
    { name: '费用信息', deIndex: 1 },
    { name: '换车记录', deIndex: 2 },
    { name: '操作记录', deIndex: 3 },
  ])

  // 合同记录tab页，根据权限和状态显示
  if (usePermission('svms:business:workOrder:work.signOrder') && [3, 4, 5].includes(Number(props.status))) {
    menus.value.splice(3, 0, { name: '合同记录', deIndex: 4 })
  }

  const chooseMenu = (i: any) => {
    menus.value.forEach((e) => {
      i == e.deIndex ? (e.active = true) : (e.active = false)
      pageIndex.value = i
    })
  }

  /**
   * 获取合同数量
   */
  const contractCount = ref({
    freeCount: 0,
    payCount: 0,
    offlineCount: 0,
  })
  const getContractCount = () => {
    if (props.orderType == 1) {
      getContractRecordCount({ orderType: props.orderType, orderId: props.orderId }).then((res: any) => {
        contractCount.value = res.result
      })
    } else if (props.orderType == 2) {
      getLongContractRecordCount({ orderType: props.orderType, id: props.orderId }).then((res: any) => {
        contractCount.value = res.result
      })
    }
  }

  provide('getContractCountShortOrder', getContractCount)
  provide('getContractCountLongOrder', getContractCount)

  // 默认选中某个 tab
  watch(
    () => routeQuery.associationorderTab,
    (newVal) => {
      if (newVal) chooseMenu(newVal)
    },
    { immediate: true }
  )

  // 默认选中合同记录中某个 tab
  watch(
    () => routeQuery.contractTab,
    (newVal: any) => {
      if (newVal) contractTabKey.value = newVal
    },
    { immediate: true }
  )

  onMounted(() => {
    getContractCount()
  })
</script>

<style lang="less" scoped>
  .menus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .menus-item {
      color: #4e5969;
      font-size: 28rpx;
      padding: 5px 16px;
      margin-right: 12px;
      font-weight: 400;
      cursor: pointer;
    }
    .active {
      border-radius: 30px;
      color: #1890ff;
      font-weight: 500;
      background: #f2f3f5;
    }
  }
</style>
